<template>
  <div style="width: 100%; height: 100%; display: flex; align-items: center; column-gap: 12px; margin-left: 12px">
    <el-tag class="tag" size="small" v-for="tag of tags" :key="tag.routeName"
            :closable="tag.routeName === 'home' && tags.length === 1 ? false : true" :effect="currentTag.name === tag.name ? 'dark' : 'plain'"
            @click="tagClick(tag)" @close="tagClose(tag)">
      {{ tag.name }}
    </el-tag>
  </div>
</template>

<script>
export default {
  name: 'xt-tag',
  computed: {
    tags() {
      return this.xtGetter('tag', 'getTags')
    },
    currentTag() {
      return this.xtGetter('tag', 'getCurrentTag')
    }
  },
  methods: {
    tagClick(tag) {
      this.xtPush(tag.routeName)
    },
    tagClose(tag) {
      let tags = this.xtGetter('tag', 'getTags')
      tags = tags.filter(item => item.routeName !== tag.routeName)
      this.xtMutation('tag', 'setTags', tags)

      if (tag.routeName === this.currentTag.routeName && this.tags.length > 0) {
        this.xtPush(this.tags[this.tags.length - 1].routeName)
        return
      }
      if (this.tags.length === 0) {
        this.xtPush('home')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tag {
  cursor: pointer;
}
</style>